<template>
  <div>
    <navigator></navigator>
  </div>
  <div class="el-menu-shop">
    <el-menu :default-active="$route.path" router>
      <el-menu-item index="/shoppingMall">
        <i class="el-icon-menu"></i>
        <template #title>条件单商城</template>
      </el-menu-item>
      <el-menu-item index="/reportMall">
        <i class="el-icon-setting"></i>
        <template #title>回测报告商城</template>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="el-menu-shop-text">
    <h4>热门回测报告市场</h4>
  </div>
  <div class="el-menu-shop-introduce">
    <i class="el-icon-notebook-2" style="font-size: 25px;color: #003399"></i>
    这里提供来自不同领域的优秀人士上传的各类智能回测报告,包括价格、时间等在内的各类交易策略。在这里，您可以学习并分享交易经验，从而做出更明智的交易决策。
  </div>
  <el-row gutter="20">
    <el-col span="16">
      <div class="el-menu-shop-input">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input1"
          type="text">
        </el-input>
      </div>
    </el-col>
    <el-col span="8">
      <div style="margin-top: 20px">
        <el-button type="primary" @click="doSearch">搜索</el-button>
      </div>
    </el-col>
  </el-row>
  <el-row class="el-menu-shop-select-box">
    <el-col span="4">
      <el-tag effect="dark" class="el-menu-shop-select-price">价格区间</el-tag>
    </el-col>
    <el-col span="4" v-for="item in tagArr" :key="item.id">
      <el-check-tag @change="onChange(item.id,item.tagStatus)" :checked="item.tagStatus" class="el-menu-shop-select">
        {{ item.tagName }}
      </el-check-tag>
    </el-col>
  </el-row>
  <el-row class="el-menu-shop-select-box">
    <el-col span="4">
      <el-tag effect="dark" class="el-menu-shop-select-price">上架时间</el-tag>
    </el-col>
    <el-col span="4" v-for="item in timeArr" :key="item.id">
      <el-check-tag @change="onTimeChange(item.id,item.timeStatus)" :checked="item.timeStatus"
                    class="el-menu-shop-select">
        {{ item.date }}
      </el-check-tag>
    </el-col>
  </el-row>
  <el-row>
    <div class="shop-goods">
      <el-col v-for="item in goodsArr.slice((curPage-1)*eachPage,curPage*eachPage)" :key="item.commodityId"
              :offset="1">
        <div class="home-goods-card">
          <el-card :body-style="{ padding: '0px' }">
            <div class="home-goods-img">
              <img src="@/assets/goodsDetail/report.jpg"
                   class="image">
            </div>
            <div style="padding: 14px;">
              <span class="condition-sheet" style="width: 20px;margin-left: -5px">{{ item.commodityName }}</span>
              <span class="price" style="margin-left: 20px;color: red">¥{{ item.commodityPrice }}</span>
              <div class="bottom" style="margin-top: 10px">
                <el-button type="primary" size="medium" round @click="checkDetail(item.commodityId)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </div>
  </el-row>
  <el-row>
    <el-pagination style="margin-left: 35%"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="curPage"
                   :page-sizes="[8,16,24,32]"
                   :page-size="eachPage"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="goodsArr.length">
    </el-pagination>
  </el-row>
</template>

<script lang="ts" src="./reportMall.ts"></script>

<style scoped>
.el-menu-shop {
  float: left;
  height: 100%;
}

.el-menu-shop-text {
  width: 300px;
  margin-left: 40px;
}

.el-menu-shop-introduce {
  width: 1400px;
  margin-left: 20px;
}

.el-menu-shop-input {
  width: 1000px;
  margin-top: 20px;
  margin-left: 30px;
}

.el-menu-shop-select {
  width: 90px;
  margin-left: 15px;
  margin-top: 12px;
  font-weight: lighter;
}

.el-menu-shop-select-box {
  margin-left: 210px;
  margin-top: 15px;
}

.el-menu-shop-select-price {
  margin-top: 10px;
  font-weight: lighter;
}

.shop-goods {
  margin-left: 150px;
  margin-top: 5px;
}

.home-goods-card {
  margin-left: 5px;
  margin-top: 50px;
}

.home-goods-img {
  width: 215px;
  height: 235px;
}

.image {
  height: 100%;
  width: 100%;
}

</style>
